<template>
  <div class="table-container">
    <!-- 表格区域 -->
    <div class="table-wrapper">
      <table>
        <thead>
          <tr>
            <th v-for="(column, index) in columns" :key="index">{{ column.label }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in paginatedData" :key="index"
            :class="['table-row', index % 2 === 0 ? 'row-even' : 'row-odd']" :style="{ height: rowHeight + 'px' }">
            <td v-for="(column, index) in columns" :key="index">
              <template v-if="column.prop === 'action'">
                <button @click="$emit('viewDetails', row)">查看</button>
              </template>
              <template v-else>
                {{ row[column.prop] }}
              </template>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页控制 -->
    <div class="pagination" ref="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">
        <img src="@/assets/img/prev.png" style="width: 10px;height: 10px;" alt="上一页" class="pagination-icon" />
      </button>
      <ul class="pagination-list">
        <li v-for="page in visiblePages" :key="page" :class="['pagination-item', { active: page === currentPage }]"
          @click="goToPage(page)">
          {{ page }}
        </li>
        <li v-if="shouldShowEllipsis">...</li>
        <li v-if="shouldShowLastPage" :class="['pagination-item', { active: totalPages === currentPage }]"
          @click="goToPage(totalPages)">
          {{ totalPages }}
        </li>
      </ul>
      <button @click="nextPage" :disabled="currentPage === totalPages">
        <img src="@/assets/img/next.png" style="width: 10px;height: 10px;" alt="下一页" class="pagination-icon" />
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: "CustomTable",
  props: {
    data: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
    pageSize: {
      type: Number,
      default: 5,
    },
  },
  data() {
    return {
      currentPage: 1,
      containerHeight: 0, // 外层容器的高度
      visiblePages: [],  // 存储可见的页码
      shouldShowEllipsis: false,  // 是否显示省略号
      shouldShowLastPage: false,  // 是否显示最后一页
    };
  },

  watch: {
    data: {
      immediate: true,
      handler() {
        this.updatePagination();  // 数据变化时更新分页
      }
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.data.length / this.pageSize);
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.data.slice(start, end);
    },
    totalItems() {
      return this.data.length;
    },
    rowHeight() {
      if (this.containerHeight > 0 && this.paginatedData.length > 0) {
        return Math.max(this.containerHeight / this.paginatedData.length, 50); // 设置最小行高为50px
      }
      return 50;
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.updateContainerHeight();
      this.updatePagination();  // 页面加载时初始化分页
      window.addEventListener('resize', this.updateContainerHeight);
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateContainerHeight);
  },
  methods: {
    updatePagination() {
      const total = this.totalPages;
      const current = this.currentPage;

      if (total <= 7) {
        // 如果总页数小于等于7，显示所有页码
        this.visiblePages = Array.from({ length: total }, (_, i) => i + 1);
        this.shouldShowEllipsis = false;
        this.shouldShowLastPage = false;
      } else {
        // 处理显示省略号和最后一页
        if (current <= 4) {
          this.visiblePages = [1, 2, 3, 4, 5];
          this.shouldShowEllipsis = true;
          this.shouldShowLastPage = true;
        } else if (current >= total - 3) {
          this.visiblePages = [total - 4, total - 3, total - 2, total - 1, total];
          this.shouldShowEllipsis = true;
          this.shouldShowLastPage = false;
        } else {
          this.visiblePages = [current - 2, current - 1, current, current + 1, current + 2];
          this.shouldShowEllipsis = true;
          this.shouldShowLastPage = true;
        }
      }
    },
    updateContainerHeight() {
      const container = this.$el.parentNode;
      if (container && this.$refs.pagination) {
        this.containerHeight = container.clientHeight - this.$refs.pagination.offsetHeight; // 减去分页部分的高度
      } else {
        console.warn('Pagination element not found or container is undefined');
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.updatePagination();  // 更新分页数据
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.updatePagination();  // 更新分页数据
      }
    },
    goToPage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = Number(page);
        this.updatePagination();  // 更新分页数据
      }
    },
  },
};
</script>
<style scoped>
/* 外层容器，使用 flex 布局 */
.table-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 表格区域，设置为可伸缩部分 */
.table-wrapper {
  flex-grow: 1;
  overflow-y: auto;
}

/* 表头样式 */
thead {
  background-color: rgba(43, 43, 43, 0.9);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* 表格样式 */
table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  background-color: transparent;
}

/* 表头单元格样式 */
th {
  padding: 1px;
  text-align: left;
  color: #ffffff;
  border-bottom: 1px solid #ddd;
  font-size: 12px;
  /* 调整表头字体大小 */
}

/* 表格内容单元格样式 */
td {
  padding: 1px;
  text-align: left;
  /* height: 20px !important; */
  color: #ffffff;
  border-bottom: 1px solid #ddd;
  font-size: 12px;
  /* 调整表格内容字体大小 */
}

/* 表格行的背景色样式 */
.table-row {
  background-color: rgba(43, 43, 43, 0.8);
  transition: background-color 0.3s ease;
}

/* 奇数行样式 */
.row-odd {
  background-color: rgba(30, 30, 30, 0.4);
}

/* 偶数行样式 */
.row-even {
  background-color: rgba(43, 43, 43, 0.4);
}

/* 悬停行的背景色 */
.table-row:hover {
  background-color: rgba(58, 58, 58, 0.5);
}

/* 分页区域 */
.pagination {
  display: flex;
  justify-content: center;
  padding: 10px;
  /* background-color: rgba(43, 43, 43, 0.9); */
}

/* 页码列表样式 */
.pagination-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 10px;
}

.pagination-item {
  margin: 0 5px;
  padding: 5px 10px;
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* 当前页码的样式 */
.pagination-item.active {
  background-color: #007bff;
  color: #ffffff;
  border-radius: 3px;
}

/* 悬停页码 */
.pagination-item:hover {
  background-color: rgba(43, 43, 43, 0.7);
}

/* 按钮样式 */
button {
  background-color: transparent;
  color: #ffffff;
  padding: 5px 10px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* 禁用按钮 */
button:disabled {
  opacity: 0.5;
}

button:hover {
  background-color: rgba(43, 43, 43, 0.7);
}
</style>
